<template>
  <div class="User">
    <h1>User</h1>
    <h2>{{ $route.params.id }}</h2>
		<h2 style="background-color: red;">{{ id }}</h2>
    <ul>
      <li
        v-for="item of ['abc', 'ccc', 'efg', 'zzz']"
        :key="item"
      >
        <router-link
          :to="{
            name: 'UserPosts',
            params: {
              username: $route.params.id,
              post_id: item
            }
          }"
        >
          {{ item }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "User",
	props: ["id"],
	data() {
		return {
			// id: null
		}
	},
	computed: {
		// id() {
		// 	return this.$route.params.id
		// }
	},
  created() {
		// this.id = this.$route.params.id
    // console.log(this.$route)
  }
}
</script>
